{extend name="./view/base/admin.html" /}
{block name="body"}
<div class="panel panel-default">
    <div class="panel-body">
        <form @submit.prevent="submit">
            <div class="form-group">
                <label>父节点</label>
                <select v-model="form.pid" class="form-control">
                    <option value="0">顶级节点</option>
                    <option v-for="v in parent_list" :value="v.id" v-text="v.name"></option>
                </select>
            </div>
            <div class="form-group">
                <label>节点名称</label>
                <input class="form-control" type="text" v-model="form.name">
            </div>
            <div class="form-group">
                <label>应用/控制器/方法</label>
                <input class="form-control" type="text" v-model="form.url">
            </div>
            <div class="form-group">
                <label>扩展参数</label>
                <ul class="list-group">
                    <li class="list-group-item" v-for="(v,k) in form.options">
                        <div class="form-row align-items-center">
                            <div class="col-auto">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            键
                                        </span>
                                    </div>
                                    <input type="text" class="form-control" v-model="v.key">
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            值
                                        </span>
                                    </div>
                                    <input type="text" class="form-control" v-model="v.value">
                                </div>
                            </div>
                            <div class="col-auto">
                                <button type="button" v-show="k==0" @click="options_add"
                                    class="btn btn-yellow">添加一项</button>
                                <button type="button" v-show="k>0" @click="options_del(k)"
                                    class="btn btn-pink">删除此项</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="form-group">
                <label>icon矢量图</label>
                <input class="form-control" type="text" v-model="form.icon">
            </div>
            <div class="form-group">
                <label>排序</label>
                <input class="form-control" type="number" v-model="form.sort">
            </div>
            <div class="form-group">
                <label>菜单</label><br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" v-model="form.is_show" id="is_show1" value="1" />
                    <label class="form-check-label" for="is_show1">显示</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" v-model="form.is_show" id="is_show-1" value="-1" />
                    <label class="form-check-label" for="is_show-1">隐藏</label>
                </div>
            </div>
            <div class="form-group">
                <label>状态</label><br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" v-model="form.status" id="status" value="1" />
                    <label class="form-check-label" for="status">启用</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" v-model="form.status" id="status-1" value="-1" />
                    <label class="form-check-label" for="status-1">停用</label>
                </div>
            </div>
            <button class="btn btn-sm btn-info" type="submit">提交</button>
        </form>
    </div>
</div>
{/block}
{block name="script"}
<script>
    new Vue({
        el:'#content',
        data(){
            return {
                form:JSON.parse('{$info|json_encode|raw}'),
                parent_list:JSON.parse('{$parent_list|json_encode|raw}')
            }
        },
        methods:{
            options_add() {
                this.form.options.push({key:'',value:''});
            },
            options_del(k) {
                Vue.delete(this.form.options, k)
            }
        },
        mounted(){
            if(!this.form.options.length){
                this.form.options.push({key:'',value:''});
            }
        }
    })
</script>
{/block}